import React, { ReactElement, useEffect } from 'react';
import { NavigationScreenProps } from 'react-navigation';

import Provider from './reducer';
import styles from './style';
import Info from './components/Info';
import { getDistrict, initInfo, getAddress } from './actions';
import { AddressProps } from './types';
import Notch, { NotchType } from '../../components/Notch';

export default ({ navigation }: NavigationScreenProps): ReactElement => {
  useEffect((): void => {
    if (navigation.state.params) {
      initInfo(navigation.state.params as AddressProps);
    } else {
      getAddress();
    }

    getDistrict();
  }, []);

  return (
    <Provider>
      <Notch style={styles.container} type={NotchType.Top}>
        <Info />
      </Notch>
    </Provider>
  );
};
